<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>院校管理</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/BX_heard.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1437774_idtdmqh48e.css">
    <link rel="stylesheet" href="css/layui/css/layui.css " media="all">
    <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="css/page.css">

    <style>
        #side {

            height: 124px;
            margin: 10px;
            /* margin-top:10px;
            margin-left:10px;
            margin-right:10px; */
            background: #fff;
        }

        #side form {
            width: 100%;
            padding: 10px 10px 0px;
        }

        #side form label {
            margin-right: 5px;
        }

        #side form div {
            float: left;
            height: 40px;
            font-size: 14px;
            line-height: 40px;
            margin-right: 10px;
            margin-bottom: 22px;
        }

        #side input {
            height: 40px;
            -webkit-appearance: none;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            /* cursor:not-allowed; */
        }

        #side .tableOne input {
            width: 70%;


        }

        #side .tableOne {
            width: 25%;
            height: 40px;

        }

        .tableTwo {
            width: 30%;
            position: relative;
        }

        #font {
            position: absolute;
            left: 80px;
            top: 2px;
            color: #c1c1c1;
        }

        .tableTwo input {
            width: 50%;
            padding-left: 30px;
        }

        .tableThree {
            width: 27%;
        }

        .tableThree input {
            width: 65%;
        }

        .search {
            width: 10%;
            background: #429788;

            color: #fff;
            text-align: center;
            border-radius: 4px;
            margin-left: 30px;
        }

        .search p {
            font-size: 22px;
        }

        .search span {
            margin-left: 5px;
        }

        .tableFour {
            width: 28%;
            position: relative;
        }

        .tableFour input {
            text-indent: 2em;
        }

        .tableFour select {
            width: 40%;
            height: 40px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;

        }

        #content {

            margin: 10px;
            background: #fff;
            overflow: hidden;
        }

        .contHeard {
            width: 100%;
            height: 60px;
            float: left;
            border-bottom: 1px solid #f6f6f6;
        }

        .contHeard h3 {
            float: left;
            font-size: 18px;
            line-height: 60px;
        }

        .add span,
        .add strong {
            width: 10%;
            height: 40px;
            float: right;
            font-size: 15px;
            color: #fff;
            line-height: 40px;
            margin-top: 9px;
            margin-right: 10px;
            text-align: center;
            border-radius: 4px;
            background: #429788;
            border: 1px solid #429788;

        }

        .schoolInfo {
            width: 100%;
            margin: 10px;
            float: left;
        }

        .schoolInfo:hover {
            background: #ccc;
        }

        /* .frist{
            width:100%;
            float: left;
        } */
        .schoolInfo li {


            font-size: 16px;
            color: #000;
            line-height: 30px;
            /* margin-bottom: 10px; */
            /* padding-left: 10px ; */
        }

        .schoolName {
            float: left;

        }

        .schoolPerson {
            float: right;
            margin-right: 70px;
        }

        .schoolPerson span {
            color: #666;
        }

        .inforMation {
            width: 100%;
            height: 70px;
            border-bottom: 1px solid #d3d3d3;
            display: flex;
            justify-content: space-around;
        }

        .inforMation li {
            width: 50%;

        }

        .inforMation li div {
            font-size: 12px;
            color: #666;
        }

        .inforMation li p {
            font-size: 14px;
            color: #000;
        }

        #table {
            position: absolute;
            left: 73px;
            top: 0px;
        }

        #activeP {
            display: inline-block;
            width: 200px;
            position: absolute;
        }

        #page {
            width: 100%;
        }

        .aremind {
            width: 25%;
            height: 200px;
            background: rgb(32, 34, 42, 0.6);
            position: fixed;
            bottom: 10px;
            right: 10px;
            border-radius: 5px;
            color: white;
            overflow: hidden;
        }

        .topRemind {
            width: 96%;
            height: 30px;
            font: 15px/30px 'simhei0';
            margin-left: 2%;
            border-bottom: 1px solid white;

        }

        .botRemind {
            width: 96%;
            margin-left: 2%;
            height: 170px;
            position: relative;
            overflow: hidden;
        }

        .inRemind {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .inRemind ul {
            width: 100%;
            height: 17px;
            font: 15px/17px "simhei";
            cursor: pointer;
        }

        .inRemind ul:hover {
            color: red;
        }

        .topRemind i {
            float: right;
        }

        .botRemind ul li {
            float: left;

        }

        .inRemind ul li:nth-of-type(3) {
            margin-left: 4%;
            margin-right: 10%;
        }

        #form {
            position: relative;
        }

        #formSet {
            width: 10%;
            height: 40px;
            float: right;
            margin-top: 9px;
            font-size: 16px;
            line-height: 40px;
            color: #fff;
            margin-right: 10px;
            text-align: center;
            border-radius: 4px;
            background: #429788;
            border: 1px solid #429788;
            overflow: hidden;
            cursor: pointer;
            position: relative;
            /* display: none; */
        }

        #form #file {
            width: 100%;
            height: 40px;
            background: red;
            border: 1px solid #429788;
            opacity: 0;
            cursor: pointer;
            position: absolute;
            left: 0px;
            top: 0px;

        }

        #sub {
            width: 10%;
            height: 40px;
            font-size: 16px;
            line-height: 40px;
            color: #fff;
            border-radius: 4px;
            background: #429788;
            border: 1px solid #429788;
            opacity: 1;
            cursor: pointer;
            position: absolute;
            left: 50%;
            top: 12px;
        }
    </style>
</head>

<body>
    <div class="heardFont">
        <span>院校管理</span>
        <strong class="heardDiff">/ 院校信息</strong>
    </div>
    <div id="side">
        <form>
            <div class="tableOne">
                <label for="table">院校名称</label>
                <input type="text" name="" id="schoolName" placeholder="     请输入院系名称 ">
            </div>
            <div class="tableTwo">
                <label for="table">离校时间</label>
                <input type="text" name="" id="table" class="layui-input" placeholder="离校时间">
                <span id="font" class="icon iconfont icon-riliriqi"></span>


            </div>
            <div class="tableThree">
                <label for="table">院校联系人</label>
                <input type="text" name="" id="schoolman" placeholder="    院校联系人姓名">
            </div>
            <div class="search">
                <p class="icon iconfont icon-search"><span>搜索</span> </p>
            </div>
            <div class="tableOne">
                <label for="table">渠道人员</label>
                <input type="text" name="" id="person" placeholder="  渠道人员姓名">
            </div>
            <div class="tableFour">
                <label for="table">活动方式</label>
                <input type="text" id="active" placeholder="活动方式">
            </div>
            <div class="tableFour">
                <label for="table">地区</label>
                <select name="play" id="province" contenteditable="true">
                    <option>请输入省份</option>

                </select>
                <select name="play" id="city" contenteditable="true">
                </select>
            </div>

        </form>
    </div>
    <div id="content">
        <div class="contHeard">
            <h3 style="padding-left:10px;">院校列表</h3>
            <div class="add">
                <span class="icon iconfont icon-tianjia">添加</span>
                <strong>导出</strong>
                <form id="form" method="post" enctype="multipart/form-data">

                    <div id="formSet">
                        导入

                        <input type="file" name="file" id="file">
                    </div>
                    <input type="submit" value="提交" id="sub">
                </form>

            </div>
        </div>
        <div id="newContent"></div>
    </div>
    <div class="page" id="page"></div>
    <div class="aremind">
        <div class="topRemind">提醒事项 <i class="layui-icon layui-icon-spread-left"></i></div>
        <div class="botRemind">
            <div class="inRemind">

            </div>
        </div>
</body>

</html>
<script src="js/jquery-3.4.1.js"></script>
<script src="css/layui/layui.js"></script>
<script src="js/drop-down option.js"></script>
<script src="js/xlPaging.js"></script>
<script src="./js/url.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>

<script>
    var dataArr = [];
    // 页码
    $("#page").paging({
        nowPage: 1, // 当前页码
        pageNum: 10, // 总页码
        buttonNum: 1, //要展示的页码数量
        canJump: 1, // 是否能跳转。0=不显示（默认），1=显示
        showOne: 0, //只有一页时，是否显示。0=不显示,1=显示（默认）
        callback: function (num) { //回调函数
            localStorage.pageNum = num;
            localStorage.searchNum = num;
        },

    })
    $(function () {
        // 页面信息请求
        indexAjax(1)

        // 省份的ajax请求
        $.ajax({
            type: "get",
            url: SetUrl.schoolUrl,
            dataType: "json",
            data: {
                "method": "province"
            },
            success: function (data) {
                console.log(data)
                if (data.code == 100) {
                    var list = data.result;
                    for (var i = 0; i < list.length; i++) {
                        $("<option value='" + list[i].id + "'>" + list[i].name + "</option>")
                            .appendTo($('#province'));
                    }
                }
            },
            error: function (xhr, error) {
                console.log(error)
            }
        });
        // 导入请求
        
        $("#formSet").on("click", function () {
            $("#sub").css("display", "block");
            

        });
        console.log(localStorage.con )

        $("#sub").on("click", function () {
                $("#form").on("submit", function () {
                    $(this).ajaxSubmit({
                        url: "http://192.168.3.21:9999/oaSystem/school",
                        type: "post",
                        dataType: "json",
                        enctype: "multipart/form-data",
                        success: function (data) {
                            console.log("1")
                            localStorage.con ="1"
                        },
                        error: function (xhr, err) {
                            console.log("2")
                        }
                    });
                    $(this).resetForm(); // 提交后重置表单
                    return false; // 阻止表单自动提交事件
                 });
            })


        // 提醒功能状态栏


        $.ajax({
            url: SetUrl.remind.state,
            type: 'post',
            dataType: 'json',
            data: {
                "moduleId": 1,
                "remindState": 1
            },
            success: function (data) {
                console.log(data);
                var liM = data.result;
                for (var i = 0; i < liM.length; i++) {
                    if(liM[i].remindTypeId == 1){
                        var thingStr = "待跟进量提醒"
                    }else if(liM[i].remindTypeId == 2){
                        var thingStr = "转公共量提醒"
                    }else{
                        var thingStr = "接受量提醒"
                    }
                    
                    var thing = liM[i].remindTypeId
                    var time = liM[i].remindTime;
                    var newTime = new Date(time);
                    var iY = newTime.getFullYear();
                    var iMoth = newTime.getMonth() + 1;
                    var iDay = newTime.getDate();
                    var iH = newTime.getHours();
                    var iM = newTime.getMinutes();
                    var iS = newTime.getSeconds();
                    var li = $("<ul>").addClass("clear").appendTo(".inRemind");
                    $("<li>").html(".").appendTo(li);
                    $("<li>").html(thingStr).appendTo(li);
                    $("<li>").html(liM[i].remindContent).appendTo(li);
                    $("<span>").html(iY + "-" + iMoth + "-" + iDay + " " + iH + ":" + iM + ":" + iS)
                        .appendTo(li);

                };
                dingshiqi()
            },
            error: function (xhr, errorInfo) {
                console.log('-------');
            }
        });
    })



    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#table'

        });
    });







    lxcselector("#active", 3, ["实训", "讲座", "宣讲"], 10, 40, -20)

    $(".add span").on("click", function () {
        window.location = "./BX_schoolInfo.html"
    })




    // 市级请求
    $('#province').change(function () {
        $("#city").html('');
        var te = $('#province').find("option:selected").val();
        $.ajax({
            type: "get",
            url: SetUrl.schoolUrl,
            dataType: "json",
            data: {
                "method": "cityandarea",
                "parent_id": te
            },
            success: function (data) {
                console.log(data)
                if (data.code == 100) {
                    var list = data.result;
                    for (var i = 0; i < list.length; i++) {
                        $("<option value='" + list[i].id + "'>" + list[i].name + "</option>")
                            .appendTo($('#city'));
                    }
                }
            },
            error: function (xhr, error) {
                console.log(error)
            }
        })
    })
    // 搜索请求
    $(".search").on('click', function () {
        searchAjax(1)
    })




    $("#newContent").on('click', '.schoolInfo', function () {

        localStorage.schoolId = $(this).attr("schoolId");
        localStorage.recordId = $(this).attr("recordId");
        window.location.href = "BX_LookSchool.html";
    });
















    // 导出的方法

    function tableToExcel(arr) {
        //要导出的json数据
        var jsonData = arr;
        //列标题，逗号隔开，每一个逗号就是隔开一个单元格
        var str = `姓名,电话,邮箱\n`;
        //增加\t为了不让表格显示科学计数法或者其他格式
        for (var i = 0; i < jsonData.length; i++) {
            for (var item in jsonData[i]) {
                str += `${jsonData[i][item] + '\t'},`;
            }
            str += '\n';
        }
        //encodeURIComponent解决中文乱码
        var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
        //通过创建a标签实现
        var link = document.createElement("a");
        link.href = uri;
        //对下载的文件命名
        link.download = "json数据表.csv";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

    // 页码点击事件
    $("#page ").on("click", " ul li", function () {
        pageNum = localStorage.pageNum;
        indexAjax(pageNum)
    })


    // 页面信息请求函数
    function indexAjax(page) {
        // 页面信息请求

        $.ajax({
            url: SetUrl.schoolUrl,
            type: "get",
            data: {
                "method": "allschool",
                "currentPage": page,
                "rows": 10
            },
            dataType: "json",
            success: function (data) {
                console.log(data);
                var list = data.result.list;
                dataArr = data.result.list;
                var setInfo = "";
                for (var i = 0; i < list.length; i++) {
                    var time = parseInt(list[i].leaveTime);
                    var newTime = new Date(time);
                    var iY = newTime.getFullYear() || 0;
                    var iMonth = newTime.getMonth() + 1 || 0;
                    var iDay = newTime.getDate() || 0;
                    var time = iY + ' - ' + iMonth + ' - ' + iDay;
                    var newName = JSON.parse(list[i].departConnection)
                    setInfo += '<ul class="schoolInfo" schoolId=' + list[i].id + ' recordId =' + list[i]
                        .recordId + '><li class="first"><div class="schoolName" ><h3>' + list[i]
                        .schoolName +
                        '</h3></div>   <div class="schoolPerson"><span>渠道人员 </span><strong> ' + list[i]
                        .empName + '</strong></div><ul class="inforMation"><li><div>实际报名人数</div><p> ' +
                        list[i].realityNum + '</p></li><li><div>预计报名人数</div><p> ' + list[i].planRecruitNum +
                        '</p></li><li><div>目标学院数量</div><p> ' + list[i].targetStudentSum +
                        '</p></li><li><div>以往培训总人数</div><p> ' + list[i]
                        .beforeStudySum + '</p></li><li><div>公司以往招生量</div><p> ' + list[i].beforeRecruitNum +
                        '</p></li><li><div>活动日期</div><p> ' + list[i].activityTime +
                        '</p></li><li><div>活动方式</div><p> ' + list[i].planActivity +
                        '</p></li><li><div>离校时间</div><p> ' + time + '</p></li><li><div>院校联系人</div><p>' +
                        newName.name + '</p></li><li><div>联系人电话</div><p>' + newName.tel +
                        '</p></li></ul></li></ul>';
                    $("#newContent").html(setInfo)
                };

                $(".add strong:eq(0)").click(function () {
                    tableToExcel(dataArr)
                })
            },
            error: function (xhr, err) {
                console.log(err)
            }

        });

    }

    // 搜索请求

    function searchAjax(page) {
        $.ajax({
            type: "get",
            url: SetUrl.schoolUrl,
            dataType: "json",
            data: {
                "method": "allschool",
                "schoolName": $("#schoolName").val(),
                "leaveTime": $("#table").val(),
                "departConnection": $("#schoolman").val(),
                "empName": $("#person").val(),
                "beforeActivity": $("#active").val(),
                "regionId": $("#city").find("option:selected").val(),
                "currentPage": page,
                "rows": 10
            },
            success: function (data) {
                console.log(data)
                $("#newContent").html("")
                var list = data.result.list;
                dataArr = data.result.list;
                var setInfo = "";
                for (var i = 0; i < list.length; i++) {
                    var time = parseInt(list[i].leaveTime);
                    var newTime = new Date(time);
                    var iY = newTime.getFullYear() || 0;
                    var iMonth = newTime.getMonth() + 1 || 0;
                    var iDay = newTime.getDate() || 0;
                    var time = iY + ' - ' + iMonth + ' - ' + iDay;
                    var newName = JSON.parse(list[i].departConnection);

                    setInfo += '<ul class="schoolInfo" schoolId=' + list[i].id +
                        '><li class="first"><div class="schoolName"><h3>' + list[i].schoolName +
                        '</h3></div>   <div class="schoolPerson"><span>渠道人员 </span><strong> ' + list[i]
                        .empName + '</strong></div><ul class="inforMation"><li><div>实际报名人数</div><p> ' +
                        list[i].realityNum + '</p></li><li><div>预计报名人数</div><p> ' + list[i].planRecruitNum +
                        '</p></li><li><div>目标学院数量</div><p> ' + list[i].targetStudentSum +
                        '</p></li><li><div>以往培训总人数</div><p> ' + list[i].beforeStudySum +
                        '</p></li><li><div>公司以往招生量</div><p> ' + list[i].beforeRecruitNum +
                        '</p></li><li><div>活动日期</div><p> ' + list[i].activityTime +
                        '</p></li><li><div>活动方式</div><p> ' + list[i].planActivity +
                        '</p></li><li><div>离校时间</div><p> ' + time + '</p></li><li><div>院校联系人</div><p>' +
                        newName.name + '</p></li><li><div>联系人电话</div><p> ' + newName.tel +
                        '</p></li></ul></li></ul>';
                    $("#newContent").html(setInfo)
                };
                $(".add strong:eq(0)").click(function () {
                    tableToExcel(dataArr)
                })
            },
            error: function (xhr, eor) {
                console.log(eor)
            }
        })
    }



    function dingshiqi() {
        var num = 0;
        var aHeight = parseFloat($('.inRemind').height());
        console.log(aHeight);
        var iTimer = setInterval(function () {
            num -= 5;
            if ((aHeight + num) <= 170) {
                num = 0
            }
            $('.inRemind').css({
                top: num
            })
        }, 200)
        var onOff = true;
        $('.aremind').find('i').click(function () {
            if (onOff) {
                $('.botRemind').css({
                        display: 'none'
                    }),
                    $('.aremind').css({
                        height: '40px'
                    })
                onOff = false;
            } else {
                $('.botRemind').css({
                    display: 'block'
                })
                $('.aremind').css({
                    height: '200px'
                })
                onOff = true;
            }
        })
    }
</script>